<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>03_事件对象</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            div#inner {
                width: 300px;
                height: 300px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="outer" style="padding: 50px;margin: 50px; width: 100%;height: 100%;border: 1px solid black;">
            <div id="inner"></div>
        </div>
        

        <script>
            // 事件对象

            // 当你触发一个事件的时候，需要有一些内容来描述这个事件的信息

            // 浏览器给我们提供了一个 黑盒子 是事件对象

            // window.event 就是事件对象，是一个 object 数据类型

            var div = document.querySelector("div");

            div.onclick = function (e) {
                // 如果e为null或者undefined 说明碰到老旧浏览器了
                // 此时使用window.event作为替代方案
                console.log(e,window.event);
                e = e || window.event
                console.log(e);
                console.log("祝你不用撸代码就能暴富");
            };

        </script>
    </body>
</html>
